<template>
  <div class="music_list-page">
    <div class="top_box"
         ref='top'
         :style="[topStyle ? topStyle1 : topStyle2]">
      <div class="cover_ cover_image"
           :style="coverStyle"
           ref="cover">
        <div class="cover_ cover_shadow"
             ref="cover_shadow"></div>
        <div class="toplay_box text-center"
             @click='openRandom'>
          <i class="icon-play"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>

      <div class="top">
        <div class="back"
             @click='back'>
          <i class="icon-back"></i>
        </div>
        <p class="text-center text_ellipsis"
           v-html="title">
        </p>
      </div>
    </div>
    <div class="song_model"
         :style="{top: s_top+'px',height: s_height+'px'}"></div>
    <div class="music_list-container"
         :style='{bottom: contentBottom + "px"}'
         ref="list_container">
      <Scroll :data='songs'
              class="list-view"
              :probeType='3'
              :onscroll='true'
              @scroll='_scroll'
              ref="scroll">
        <div class="wrapper">
          <song-list :songs='songs'
                     @select="toselect"
                     :rank='rank'></song-list>
        </div>
        <div class="loading-container"
             v-show="songs && !songs.length">
          <loading></loading>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Scroll from 'base/scroll/scroll.vue'
import SongList from 'base/songList/song-list.vue'
import loading from 'base/loading/loading'
import { prefixStyle } from 'common/js/dom.js'
import { playMode } from 'common/js/config'
// 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
// import { createNamespacedHelpers } from 'vuex'
import { playMiniMixin } from 'common/js/mixin'
// const { mapActions } = createNamespacedHelpers('player')
// 导航的高度
const TITLE_HEIGHT = 40
// 检测浏览器兼容的css3前缀
const TRANSFORM = prefixStyle('transform')
const BLUR = prefixStyle('backdrop-filter')
// 歌手
export default {
  props: ['title', 'songs', 'avatar', 'rank'],
  mixins: [playMiniMixin],
  data () {
    return {
      // 滚动监听
      posy: 0,
      topStyle: 0,
      // top两种边界样式
      topStyle1: {
        height: TITLE_HEIGHT + 'px',
        paddingTop: 0,
        zIndex: 3
        // backgroundImage: 'url(' + this.avatar + ')'
      },
      topStyle2: {
        height: 0,
        paddingTop: '70%',
        zIndex: 2
      },
      s_top: 0,
      s_height: 0,
      prev_y: 0

    }
  },
  methods: {
    // scroll滚动事件 {x: 0, y: -890.925} 边界处理
    _scroll (pos) {
      this.posy = pos.y
      if (this.posy <= (TITLE_HEIGHT - this.top_height)) {
        this.topStyle = 1
        this.s_top = this.top_height
      } else {
        this.topStyle = 0
        this.s_top = this.top_height + this.posy
        // 缩放
        let y = -this.posy
        // 缩放比例 移动相对于图片的高度.
        let precent = Math.abs(y / this.top_height)
        let scale = 0
        let blur = 0
        if (y < 0) {
          scale = 1.1 + precent
          this.$refs.cover.style[TRANSFORM] = `scale(${scale})`
        } else { // 上推 模糊
          scale = 1.1 - precent
          // 模糊值
          blur = Math.min(20, 20 * precent)
          scale = scale < 1 ? 1 : scale
          this.$refs.cover.style[TRANSFORM] = `scale(${scale})`
          this.$refs.cover_shadow.style[BLUR] = `blur(${blur}px)`
        }
      }
    },
    // 打开播放器 随机的模式
    openRandom () {
      this.openP({
        list: this.songs,
        index: 0,
        mode: playMode.random
      })
    },
    // 打开播放器
    toselect (index, item) {
      // console.log(this.songs)
      if (this.currentSong) {
        // 如果当前是随机播放列表 通过id来找到index
        this.next(item.id)
      } else {
        this.openP({
          list: this.songs,
          index
        })
      }
    },
    refresh () {
      this.$refs.scroll.refresh()
    },
    back () {
      this.$router.back()
    },
    _initData () {
      // if (!this.songs) return false
      this.top_height = this.$refs.top.clientHeight
      this.$refs.list_container.style.top = this.top_height + 'px'
      this.s_height = this.top_height
      this.s_top = this.top_height
    }
  },
  created () {
    // 兼容屏幕
    this.once = () => {
      this._initData()
    }
    window.addEventListener('resize', this.once)
  },
  destroyed () {
    window.removeEventListener('resize', this.once)
  },
  mounted () {
    // 初始化
    this._initData()
  },
  computed: {
    coverStyle () {
      return {
        backgroundImage: 'url(' + this.avatar + ')',
        opacity: 1,
        [TRANSFORM]: `scale(${1.1})`
      }
    }
  },
  components: {
    Scroll,
    SongList,
    loading
  }
}
</script>

<style  lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.music_list-page
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 2
  background $color-background
  .toplay_box
    position absolute
    bottom 40px
    left 50%
    width 150px
    line-height 30px
    color $color-theme
    font-size 14px
    border 1px solid $color-theme
    transform translateX(-50%)
    border-radius 30px
    z-index 5
  .song_model
    position fixed
    top 0
    width 100%
    background $color-background
    z-index 2
  .top_box
    position relative
    background-size cover
    width 100%
    height 0
    padding-top 70%
    // overflow hidden
    z-index 2
    .cover_
      position absolute
      top 0
      left 0
      bottom 0
      right 0
      z-index 3
      transition all 0.2s
    .cover_shadow
      z-index 4
      background $color-background-d
    .cover_image
      transform-origin top
      // transform scale(1.1)
      background-size cover
  .top
    position absolute
    top 0
    width 100%
    color #fff
    font-size $font-size-medium-x
    line-height 40px
    z-index 4
    overflow hidden
    .back
      position absolute
      top 0
      left 6px
      z-index 50
      .icon-back
        display block
        padding 10px
        font-size $font-size-large-x
        color $color-theme
    .text-center
      margin 0 48px
  .music_list-container
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    z-index 2
  .list-view
    position relative
    height 100%
    // overflow hidden
</style>